<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        img {
            width: 1226px;
        }

        div {
            width: 1226px;
            margin: 10px auto;
        }
    </style>
</head>
<body>

<div>
    <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/2e389157059c44d9352b42e04407cbb7.jpg" alt="">
</div>


<script>
    // 数据库
    var img_src = [
        'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/2e389157059c44d9352b42e04407cbb7.jpg',
        'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/e47bc402508c005ec3c0f4c13bb8b705.jpg',
        'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/6807986a20a839b7b971274c705bbacf.jpg'
    ]

    var img_index = 0
    // 每隔3秒实现图片的切换
    var img_ele = document.getElementsByTagName('img')[0]
    var time_index = setInterval(function () {
        img_index++
        if (img_index >= img_src.length) {
            img_index = 0
        }
        img_ele.src = img_src[img_index]
    }, 3000)

    // 监听图片鼠标移入事件
    img_ele.onmouseenter = function () {
        clearInterval(time_index)
    }

    // 监听图片鼠标移出事件
    img_ele.onmouseout = function () {
        time_index = setInterval(function () {
            img_index++
            if (img_index >= img_src.length) {
                img_index = 0
            }
            img_ele.src = img_src[img_index]
        }, 3000)
    }


</script>

</body>
</html>